<template>
	<div>
		<div class="title">
			周末去哪儿
		</div>
		<div class="weekend">
			<ul>
				<li v-for="item of weekendList" :key="item.id">
					<div class="item-img">
						<img :src="item.imgUrl" />
					</div>
					<div class="item-con">
						<p class="item-title">{{item.title}}</p>
						<p class="item-desc">{{item.desc}}</p>
					</div>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
	export default{
		name:"IndexWeekend",
		props:{
			weekendList:Array
		}
	}
</script>

<style scoped>
	.title{
		background: #eee;
		font-size: .3rem;
		line-height: .84rem;
		padding-left: 4%;
	}
	.weekend ul li{
		width: 100%;
	}
	.weekend ul li .item-img{
		flex: 1;
	}
	.weekend ul li .item-con{
		padding: .14rem .2rem .2rem .2rem;
	}
	.weekend ul li .item-con .item-title{
		overflow: hidden;
		padding-right: 1.4rem;
		color: #212121;
		font-size: .28rem;
		line-height: .48rem;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.weekend ul li .item-con .item-desc{
		overflow: hidden;
		padding-right: 1.4rem;
		color: #616161;
		font-size: .24rem;
		line-height: .42rem;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
</style>
